<template>
  <div class="baiduUe">
    <div class="outmain ba_f">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="外卖设置" name="orderset" v-if="takeout=='1'">
          <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
              <span>订单设置</span>
            </div>
          </div>
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="下单优先">
              <el-radio-group v-model="form.first">
                <el-radio label="1">自提优先</el-radio>
                <el-radio label="2">外卖优先</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="外卖名称自定义">
              <el-input v-model="form.outName" placeholder="请输入外卖名称" style="width: 340px"></el-input>
            </el-form-item>
            <el-form-item label="自提名称自定义">
              <el-input v-model="form.selfName" placeholder="请输入自提名称" style="width: 340px"></el-input>
            </el-form-item>
            <el-form-item label="自提订单详情提示">
              <el-input placeholder="请输入自提订单详情文字" v-model="form.tips" type="textarea" :maxlength="50" rows="3" style="width: 340px"></el-input>
              <div class="yb_margin lh16">请输入自提订单详情文字，最多50个文字</div>
            </el-form-item>
            <el-form-item label="自动关闭未付款订单">
              <el-radio-group v-model="form.autoClose">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，如用户下单后超过5分钟未支付，系统将自动关闭此订单，请谨慎使用</div>
            </el-form-item>
            <el-form-item label v-if="form.autoClose=='1'">
              <el-input v-model="form.closeTime" placeholder="请输入关闭时间" type="number" style="width: 340px">
                <template slot="append">分钟未付款自动关闭订单</template>
              </el-input>
            </el-form-item>
            <el-form-item label="自动拒单时间">
              <el-radio-group v-model="form.autoRefuse">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，如商家超时15分钟未接单，系统将自动为商家拒单并退款，请谨慎使用</div>
            </el-form-item>
            <el-form-item label v-if="form.autoRefuse=='1'">
              <el-input v-model="form.refuseTime" placeholder="请输入拒单时间" type="number" style="width: 340px">
                <template slot="append">分钟商家未接单自动拒单</template>
              </el-input>
            </el-form-item>
            <el-form-item label="自动确认收货">
              <el-radio-group v-model="form.autoComplete">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，如用户订单未确认收货，1小时后系统将自动为用户确认收货，最小值为1小时，请谨慎使用</div>
            </el-form-item>
            <el-form-item label v-if="form.autoComplete=='1'">
              <el-input v-model="form.completeTime" placeholder="请输入小时数" type="number" style="width: 340px">
                <template slot="append">小时自动确认收货</template>
              </el-input>
            </el-form-item>
            <el-form-item label="催单时间">
              <el-radio-group v-model="form.reminderSwitch">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，如用户可在商家接单30分钟后可进行催单提醒</div>
            </el-form-item>
            <el-form-item label v-if="form.reminderSwitch=='1'">
              <el-input class="mar_r20" v-model="form.reminder" placeholder="请输入分钟" type="number" style="width: 400px">
                <template slot="prepend">商家接单</template>
                <template slot="append">分钟后用户可以催单</template>
              </el-input>
              <el-input v-model="form.interval" placeholder="请输入间隔时间" type="number" style="width: 260px">
                <template slot="append">间隔时间（分钟/次）</template>
              </el-input>
            </el-form-item>
            <el-form-item label="下单页提示门店">
              <el-radio-group v-model="form.orderStore">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，进入下单页弹窗提示当前门店</div>
            </el-form-item>
            <el-form-item label="确认下单">
              <el-radio-group v-model="form.confirmSwitch">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，下单增加确认下单提醒</div>
            </el-form-item>
            <el-form-item label="自提核销订单">
              <el-radio-group v-model="form.writeOff">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">关闭后，订单核销码将不显示</div>
            </el-form-item>
            <!--                <el-form-item label="是否绑定手机号才能下单">-->
            <!--                    <el-radio-group v-model="form.isBindTel">-->
            <!--                        <el-radio label="1">是</el-radio>-->
            <!--                        <el-radio label="2">否</el-radio>-->
            <!--                    </el-radio-group>-->
            <!--                </el-form-item>-->
            <!--                <div class="maintitle">退款设置</div>-->
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>退款设置</span>
              </div>
            </div>
            <el-form-item label="商家接单后退款">
              <el-radio-group v-model="form.receivingRefund">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，商家接单后用户仍然可以申请取消订单，此操作会影响订单售后，请谨慎开启</div>
            </el-form-item>
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>评价设置</span>
                </div>
            </div>
            <el-form-item label="订单评价">
                <el-radio-group v-model="form.orderEvaluate">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="2">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
<!--            <el-form-item label="显示评价">-->
<!--                <el-radio-group v-model="form.showEvaluate">-->
<!--                    <el-radio label="1">开启</el-radio>-->
<!--                    <el-radio label="2">关闭</el-radio>-->
<!--                </el-radio-group>-->
<!--            </el-form-item>-->
            <el-form-item label="评价审核" v-if="form.orderEvaluate=='1'">
                <el-radio-group v-model="form.evaluateExamine">
                    <el-radio label="1">开启</el-radio>
                    <el-radio label="2">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>商品设置</span>
              </div>
            </div>
            <!--                <el-form-item label="划线价显示">-->
            <!--                    <el-radio-group v-model="form.scribingPriceShow">-->
            <!--                        <el-radio label="1">开启</el-radio>-->
            <!--                        <el-radio label="2">关闭</el-radio>-->
            <!--                    </el-radio-group>-->
            <!--                </el-form-item>-->
            <el-form-item label="销量显示">
              <el-radio-group v-model="form.saleShow">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，商品详情会显示销量数据</div>
            </el-form-item>
            <el-form-item label="库存显示">
              <el-radio-group v-model="form.stockShow">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，商品详情会显示库存数据</div>
            </el-form-item>
            <el-form-item label="售罄商品">
              <el-radio-group v-model="form.sellOutShow">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，商品列表会显示售罄商品，关闭则不显示</div>
            </el-form-item>
            <el-form-item label="商品活动规则">
              <el-checkbox-group v-model="form.goodsActivityRule">
                <el-checkbox label="1">与满减活动互斥</el-checkbox>
                <el-checkbox label="2">与优惠券互斥</el-checkbox>
              </el-checkbox-group>
              <div class="yb_margin lh16">勾选后，参与的商品活动的订单，则不能同时享受满减活动或优惠券</div>
            </el-form-item>
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>奖励设置</span>
              </div>
            </div>
            <el-form-item label="订单积分奖励">
              <el-radio-group v-model="form.orderIntegralType">
                <el-radio label="1">按每单</el-radio>
                <el-radio label="2">按订单金额</el-radio>
                <el-radio label="3">关闭</el-radio>
              </el-radio-group>
              <div class="flex mar_t10" v-if="form.orderIntegralType=='1'">
                <div class="mar_r10">每单赠送</div>
                <el-input-number v-model="form.integral" controls-position="right" @change="handleChange" :min="0"></el-input-number>
                <div class="mar_l5">积分</div>
              </div>
              <div class="flex mar_t10" v-if="form.orderIntegralType=='2'">
                <div class="mar_r10">订单实付金额的</div>
                <el-input-number v-model="form.integral" controls-position="right" @change="handleChange" :min="1"></el-input-number>
                <div class="mar_l5">%赠送积分</div>
              </div>
              <div class="yb_margin lh16 mar_t10">如选择按单赠送积分，则表示每完成一单赠送积分,如选择按实付金额,则表示实付金额乘以百分比</div>
            </el-form-item>
            <el-form-item label="成长值奖励">
              <el-radio-group v-model="form.orderGrowthType">
                <el-radio label="1">按每单</el-radio>
                <el-radio label="2">按订单金额</el-radio>
                <el-radio label="3">关闭</el-radio>
              </el-radio-group>
              <div class="flex mar_t10" v-if="form.orderGrowthType=='1'">
                <div class="mar_r10">每单赠送</div>
                <el-input-number v-model="form.growth" controls-position="right" @change="handleChange" :min="0"></el-input-number>
                <div class="mar_l5">成长值</div>
              </div>
              <div class="flex mar_t10" v-if="form.orderGrowthType=='2'">
                <div class="mar_r10">订单实付金额的</div>
                <el-input-number v-model="form.growth" controls-position="right" @change="handleChange" :min="1"></el-input-number>
                <div class="mar_l5">%赠送成长值</div>
              </div>
              <div class="yb_margin lh16 mar_t10">如选择按单赠送成长值，则表示每完成一单赠送成长值,如选择按实付金额,则表示实付金额乘以百分比</div>
            </el-form-item>
            <div class="shuju_title mar_b20">
              <div class="shuju_title_text">
                <span>自提协议</span>
              </div>
            </div>
            <el-form-item label="自提协议">
              <baidu-ueditor :content="form.selfAgreement" @ueditor="getUeditor"></baidu-ueditor>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="店内设置" name="outset" v-if="instore=='1'">
          <div class="shuju_title mar_b20 mar_t20">
            <div class="shuju_title_text">
              <span>堂食设置</span>
            </div>
          </div>
          <el-form ref="form2" :model="form2" label-width="180px">
            <!--                        <el-form-item label="堂食功能">-->
            <!--                            <el-radio-group v-model="form2.instoreOpen">-->
            <!--                                <el-radio label="1">开启</el-radio>-->
            <!--                                <el-radio label="2">关闭</el-radio>-->
            <!--                            </el-radio-group>-->
            <!--                            <div class="yb_margin lh16">此功能关闭后,商家将无法使用堂食1功能</div>-->
            <!--                        </el-form-item>-->
            <el-form-item label="距离判断">
              <el-radio-group v-model="form2.distanceOpen">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，将判断用户与门店的距离位置，不在范围内用户将不能下单</div>
            </el-form-item>
            <el-form-item label="距离" v-show="form2.distanceOpen=='1'">
              <el-input-number v-model="form2.distance" controls-position="right" :min="1" :max="1000000"></el-input-number>
              <span class="yb_margin mar_l10">（距离店家{{ form2.distance }}米内正常下单）</span>
            </el-form-item>
            <el-form-item label="结账模式" :required="true" prop="payMode">
              <el-checkbox-group v-model="form2.payMode">
                <el-checkbox label="1" value="1">先结算再就餐</el-checkbox>
                <el-checkbox label="2" value="2">先就餐再结算</el-checkbox>
              </el-checkbox-group>
              <div class="yb_margin lh16">先结算再就餐：指用户下单后需要先支付，商家才打印订单，此模式下不支持用户自行加菜退菜操作</div>
              <div class="yb_margin lh16">先就餐再结算：指用户下单后，商家立即打印订单，此模式下支持用户自行加菜操作，但有很大的逃单风险，请谨慎开启</div>
            </el-form-item>
            <el-form-item label="下单未付款订单">
              <el-radio-group v-model="form2.autoClose">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，如用户下单后超过5分钟未支付，系统将自动关闭此订单，此功能仅限在先结算再就餐模式下生效</div>
            </el-form-item>
            <el-form-item label v-if="form2.autoClose=='1'">
              <el-input v-model="form2.closeTime" placeholder="请输入关闭时间" type="number" style="width: 340px">
                <template slot="append">分钟未付款自动关闭订单</template>
              </el-input>
            </el-form-item>
            <!--                        <el-form-item label="餐前支付订单关闭时间" v-if="form2.autoClose=='1'">-->
            <!--                            <el-input-number v-model="form2.closeTime" controls-position="right" :min="0" :max="1000000"></el-input-number><span class="yb_margin">（单位：分钟）</span>-->
            <!--                            <div class="yb_margin lh16">用户下单多少分钟后未付款，系统将自动关闭订单并清台,此功能仅限在先结算再就餐模式下生效</div>-->
            <!--                        </el-form-item>-->
            <el-form-item label="点餐模式" :required="true" prop="orderMode">
              <el-checkbox-group v-model="form2.orderMode">
                <el-checkbox label="1" value="1">多人点餐</el-checkbox>
                <el-checkbox label="2" value="2">拼桌点餐</el-checkbox>
              </el-checkbox-group>
              <div class="yb_margin lh16">多人点餐：指同桌用户可以同时加菜并可以互相看到点菜内容</div>
              <div class="yb_margin lh16">拼桌点餐：多人共用一桌，各自独立点餐下单</div>
            </el-form-item>
            <el-form-item label="点餐背景图">
              <div class="uploadSource bor_de rel flex curs" v-if="form2.background">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form2.background,1)"></i>
                </label>
                <img :src="form2.background" @click="test(1)" class="wid" />
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
            </el-form-item>
            <div class="shuju_title mar_b20 mar_t20">
              <div class="shuju_title_text">
                <span>当面付设置</span>
              </div>
            </div>
            <!--                        <el-form-item label="授权设置">-->
            <!--                            <el-checkbox-group v-model="form2.authOpen">-->
            <!--                                <el-checkbox label="1" value='1'>用户买单需要授权昵称、头像等信息</el-checkbox>-->
            <!--                            </el-checkbox-group>-->
            <!--                            <div class="yb_margin lh16">*勾选后,用户首次访问小程序使用买单功能时,在点击立即支付时需要授权昵称、头像等信息</div>-->
            <!--                        </el-form-item>-->
            <el-form-item label="买单支持">
              <el-checkbox-group v-model="form2.Orderdiscount">
                <el-checkbox label="1" value="1">优惠券</el-checkbox>
                <el-checkbox label="2" value="2">会员折扣</el-checkbox>
              </el-checkbox-group>
              <div class="yb_margin lh16">当面付支持的优惠方式</div>
            </el-form-item>
            <div class="shuju_title mar_b20 mar_t20">
              <div class="shuju_title_text">
                <span>快餐设置</span>
              </div>
            </div>
            <!--                        <el-form-item label="快餐模式">-->
            <!--                            <el-radio-group v-model="form2.fastOpen">-->
            <!--                                <el-radio label="1">开启</el-radio>-->
            <!--                                <el-radio label="2">关闭</el-radio>-->
            <!--                            </el-radio-group>-->
            <!--                            <div class="yb_margin lh16">此功能关闭后,商家将无法使用快餐模式</div>-->
            <!--                        </el-form-item>-->
            <el-form-item label="下单未付款订单">
              <el-radio-group v-model="form2.fastAutoClose">
                <el-radio label="1">开启</el-radio>
                <el-radio label="2">关闭</el-radio>
              </el-radio-group>
              <div class="yb_margin lh16">开启后，如用户下单后超过5分钟未支付，系统将自动关闭此订单，请谨慎使用</div>
            </el-form-item>
            <el-form-item label v-if="form2.fastAutoClose=='1'">
              <el-input v-model="form2.fastCloseTime" placeholder="请输入关闭时间" type="number" style="width: 340px">
                <template slot="append">分钟未付款自动关闭订单</template>
              </el-input>
            </el-form-item>
          </el-form>
          <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import attachmentImg from '@/plugins/attachment-img';
import { getConfig, postConfig } from '@/api/setup';
import baiduUeditor from '@/plugins/baidu-ueditor';

export default {
  components: { baiduUeditor, attachmentImg },
  created() {
    this.bus.$emit('loading', true);
    if (this.activeName == 'orderset') {
      this.init();
    } else if (this.activeName == 'outset') {
      this.init2();
    }
  },
  data() {
    return {
      activeName: 'orderset',
      form: {
        goodsActivityRule: [],
        first: '1',
        outName: '',
        selfName: '',
        tips: '',
        autoClose: '2',
        closeTime: '',
        autoRefuse: '2',
        refuseTime: '',
        autoComplete: '2',
        reminderSwitch: '2',
        confirmSwitch: '2',
        orderStore: '2',
        writeOff: '1',
        completeTime: '',
        isBindTel: '2',
        receivingRefund: '2',
        orderEvaluate: '2',
        showEvaluate: '2',
        evaluateExamine: '2',
        scribingPriceShow: '2',
        saleShow: '2',
        stockShow: '2',
        sellOutShow: '2',
        reminder: '',
        interval: '',
        orderIntegralType: '3',
        integral: '',
        orderGrowthType: '3',
        growth: '',
        selfAgreement: ''
      },
      form2: {
        instoreOpen: '1',
        distanceOpen: '1',
        distance: '',
        payMode: ['1', '2'],
        autoClose: '2',
        closeTime: '',
        orderMode: ['1', '2'],
        fastOpen: '1',
        authOpen: '1',
        Orderdiscount: ['1', '2'],
        background: '',
        fastAutoClose: '2',
        fastCloseTime: ''
      },
      instore: '',
      takeout: '',
    };
  },
  methods: {
    handleTabClick() {
      switch (this.activeName) {
        case 'orderset':
          this.init();
          break;
        case 'outset':
          this.init2();
          break;
      }
    },
    getUeditor(content) {
      this.form.selfAgreement = content;
    },
    async init() {
      const { data } = await getConfig({ ident: 'currency' });
      this.formcope = this.form;
      this.form = Object.assign(this.formcope, data);
      this.instore = data.instorePower ? data.instorePower : '1';
      this.takeout = data.takeoutPower ? data.takeoutPower : '1';
      this.activeName =  this.takeout=='1'?'orderset':'outset';
      if(data.takeoutPower==2 && data.instorePower==1){
        this.init2()
      }
      this.bus.$emit('loading', false);
    },
    async init2() {
      const { data } = await getConfig({ ident: 'instoreSet' });
      this.formcope = this.form2;
      this.form2 = Object.assign(this.formcope, data);
      this.bus.$emit('loading', false);
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      // console.log(this.$refs, i)
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form2.background = url.str;
    },
    deleteMultiImage(item, index, type) {
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
        }
      } else {
        switch (index) {
          case 1:
            this.form2.background = '';
            break;
        }
      }
    },
    handleChange() {},
    submitForm() {
      if (this.activeName == 'orderset') {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.form.ident = 'currency';
            const { msg } = await postConfig(this.form);
            this.$baseMessage(msg, 'success');
            this.init();
          } else {
            return false;
          }
        });
      } else if (this.activeName == 'outset') {
        this.$refs['form2'].validate(async (valid) => {
          if (valid) {
            this.form2.ident = 'instoreSet';
            this.form2.identName = '店内设置';
            const { msg } = await postConfig(this.form2);
            this.$baseMessage(msg, 'success');
            this.init2();
          } else {
            return false;
          }
        });
      }
    }
  }
};
</script>
<style>
.el-input-number.is-controls-right .el-input__inner {
  width: 140px;
}
</style>
<style lang="scss">
.baiduUe {
  .time_item .el-input {
    width: 180px;
  }
}
</style>

